<template>
  <div>
    <h2>父组件</h2>
    <div>
      <h3>父组件中的数据：</h3>
      <h3>house: {{ house }}</h3>
    </div>
    <Child ref="c1"/>
    <Child2 ref="c2"/>
    <button @click="changeC1Book(10)">修改子组件中的书量</button>
    <button @click="changeC2Book(20)">修改子组件中的书量</button>
    <button @click="getAllInstan($refs)">获取所有的子组件实例对象</button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import Child from './child.vue';
import Child2 from './child2.vue';

const house = ref(4)
const c1 = ref(null)
const c2 = ref(null)

function changeC1Book(num: number) {
  c1.value.book +=num
}
function changeC2Book(num: number) {
  c2.value.book +=num
}

// 通过 $refs 获取子组件实例对象
// value 是一个对象，包含了所有的子组件实例对象
// key 是子组件的名称
// value 是子组件的实例对象
function getAllInstan(value: any) {
  for (let key in value) {
   console.log(value[key]); 
   value[key].book += 100;
  }
}

// 将组件本身数据交出
defineExpose({
  house
  })
</script>

<style scoped>
/* 父组件样式 */
div {
  background: linear-gradient(to right, #8e2de2, #4a00e0);
  border-radius: 15px;
  padding: 30px;
  color: white;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  max-width: 800px;
  margin: 20px auto;
}

h2 {
  font-size: 28px;
  margin-bottom: 25px;
  text-align: center;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  position: relative;
  padding-bottom: 15px;
}

h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 3px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 3px;
}
</style>